<template>
  <div class="basemaplayer-switch">
    <div v-show="showLayerList" class="basemap-list">
      <div
        class="basemaplayer"
        :class="{ selected: currentMap === 'vec' }"
        @click="changeMap('vec')"
      >
        <span>地图</span>
      </div>
      <div
        class="basemaplayer"
        :class="{ selected: currentMap === 'img' }"
        @click="changeMap('img')"
      >
        <span>卫星图</span>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  props: {
    mainMap: {
      type: Object,
    },
    // vecMapLayers: {
    //   type: Array,
    //   default: () => { return [] }
    // },
    // imgMapLayers: {
    //   type: Array,
    //   default: () => { return [] }
    // },
  },
  data() {
    return {
      currentMap: "vec", // 当前地图，img或vec
      showLayerList: true,

    };
  },
  methods: {
    switchToVecMap() {
      // this.imgMapLayers.forEach(layer => {
      //   this.mainMap.map.removeLayer(layer)
      // });
      // this.vecMapLayers.forEach(layer => {
      //   this.mainMap.map.addLayer(layer)
      // });
    },
    switchToImgMap() {
      // this.vecMapLayers.forEach(layer => {
      //   this.mainMap.map.removeLayer(layer)
      // });
      // this.imgMapLayers.forEach(layer => {
      //   this.mainMap.map.addLayer(layer)
      // });
    },
    switchBaseMap(mapName) {
      switch (mapName) {
        case "vec":

          // this.switchToVecMap()
          this.mainMap && this.mainMap.switchMap('base-map')
          break;
        case "img":
          // this.switchToImgMap()
          this.mainMap && this.mainMap.switchMap('image-map')
          break;

        default:
          break;
      }
    },
    changeMap(mapName) {
      if (!this.mainMap || mapName == this.currentMap) {
        return;
      }
      this.currentMap = mapName;
      this.switchBaseMap(mapName);
      // this.showLayerList = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.basemaplayer-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .basemap-list {
    display: flex;
    align-items: space-between;

    .basemaplayer {
      width: 57px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;

      margin-left: 5px;
      border: 1px solid none;

      // background: rgba(0, 0, 0, 0.5);
      background: rgba(62, 62, 62, 0.45);
      box-shadow: 0px 2px 6px 0px rgba(64, 100, 197, 0.35);
      border-radius: 4px;
      cursor: pointer;
      color: #FFFFFF;
      font-size:14px;
    }

    .selected {
      border: 1px solid #9AE7FF;
    }
  }
}
</style>
